import { useEffect, useReducer } from 'react'
import data from '../../public/data'
import type { Action } from './CardPageType'
import CardPaper from './components/cardpaper/CardPaper'
import PagePaper from './components/pagepaper/PagePaper'

function CardPage () {


  // #region 变量声明
  // const [ list, setList ] = useState([...data])
  // const [ curClickIndex, setCurClickIndex ] = useState(-1)
  // const [ isFinished, setIsFinished ] = useState(false)

  const [ state, dispatch ] = useReducer((prev, action: Action) => {
    const next = Object.assign({}, prev)
    if (next[action.type] !== undefined) {
      // console.log(next[action.type]);
      (next[action.type] as typeof action.value) = action.value
    }
    return next
  }, {
    list: [...data],
    curClickIndex: -1,
    isFinished: false
  })
  // const [ num, setNum ] = useState(10)
  // const [ sum, setSum ] = useState(40)

  // #endregion

  // #region 函数
  // const changeList = (newList: Data[]) => {
  //   setList(newList)
  // }
  // const changeIndex = (newIndex: number) => {
  //   setCurClickIndex(newIndex)
  // }
  // const changeIsFinished = (newIsFinished: boolean) => {
  //   setIsFinished(newIsFinished)
  // }
  // const changenum = useCallback(() => {
  //   setNum(num + 1)
  //   console.log(num)
  // }, [sum])
  // #endregion

  // #region Hooks
  useEffect(() => {
    // console.log('重新渲染')
  })
  // #endregion

  return (
    <>
      <PagePaper state={ state } dispatch={ dispatch } />
      <CardPaper state={ state } dispatch={ dispatch } />
      {/* { num } */}
      {/* <button onClick={ changenum }>num改变</button>
      <button onClick={ () => setNum(num + 1) }>sum改变</button>
      <button onClick={ () => setSum(sum + 1) }>sum改变</button> */}
    </>
  )
}

export default CardPage
